<!--
 * @description  : 执法一点通
 * @descriptionDetail: 执法一点通
 * @author       : bln
 * @create       : 2024-08-08 00:00:00
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="title" :custom-back="goBack" style="z-index: 99999" />
    <!-- #endif -->
    <view class="law">
      <lawStandards v-if="tabIndex==0" />
      <educationFilm v-if="tabIndex==2" />
      <onSiteDisposal v-if="tabIndex==1" />
      <lawsRegulations v-if="tabIndex==3" />
    </view>
    <u-tabbar :list="tabList" :active-color="$theme.u_type_primary" icon-size="40" bg-color="#F3F4F5" :mid-button="false" v-model="current" @change="tabsChange"></u-tabbar>
  </view>
</template>

<script>
import lawStandards from './lawStandards/index.vue'
import educationFilm from './educationFilm/index.vue'
import onSiteDisposal from './onSiteDisposal/index.vue'
import lawsRegulations from './lawsRegulations/index.vue'

export default {
  components: { lawStandards, educationFilm, onSiteDisposal, lawsRegulations },
  data() {
    return {
      current: 0,
      title: '执法规范',
      barStyle: { // 底部滑块的样式
        background: '#027AFF !important',
        marginBottom: '-5rpx',
        width: '60rpx',
        marginLeft: '-10rpx',
      },
      tabIndex: 0,
      tabList: [{
        iconPath: '../../static/law/zfgf.png',
        selectedIconPath: '../../static/law/zfgf-active.png',
        text: '执法规范'
      },
      {
        iconPath: '../../static/law/xccz.png',
        selectedIconPath: '../../static/law/xccz-active.png',
        text: '现场处置'
      },
      {
        iconPath: '../../static/law/jxp.png',
        selectedIconPath: '../../static/law/jxp-active.png',
        text: '教学片'
      },
      {
        iconPath: '../../static/law/flfg.png',
        selectedIconPath: '../../static/law/flfg-active.png',
        text: '法律法规'
      }]
    }
  },
  methods: {
    // 切换tabs
    tabsChange(curr) {
      this.tabIndex = curr
      this.title = this.tabList[curr].text
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 0;
}
.content {
  height: 100%;
}
.law {
  height: calc(100% - 94px);
}
</style>
